<template>
  <div class="bg-white mt-[10px]">
    <div class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px]  px-[15px]" style="border-bottom: 1px solid #E4E4E4;">
      <div class="w-[20%] mr-[6px]">序号</div>
      <div class="w-[25%] mr-[6px]">登录时间</div>
      <div class="w-[35%]">IP地址</div>
      <div class="w-[20%]">IP归属</div>
    </div>
  </div>
  <div class="page-main overflow-y-auto" ref="scrollRef">
    <div class="bg-white px-[15px]">
      <scroll-list
        v-model:loading="state.loading"
        v-model:refresh="state.refresh"
        :finished="state.finished"
        :length="list.length"
        @load="load"
      >
        <template v-for="(item, index) in list">
          <UserlogItem
            :item="item"
            :last="index >= list.length - 2"
          />
        </template>
      </scroll-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqUserLog } from '@/api/report'
import UserlogItem from './userlog-item.vue';
import moment from "moment";
interface Params{
  Name?: string;
  StartDate?: string;
  EndDate?: string;
  date?:string[]
}
const props = withDefaults(
  defineProps<{
    searchParams: Params ;
  }>(),
  {
  }
);
import { useList } from "@/hooks/useList";
const getParams = () =>{
  const params:Params = {}
  if(props.searchParams.Name){
    params.Name = props.searchParams.Name
  }
  if (props.searchParams.date) {
    params.StartDate = moment(props.searchParams.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(props.searchParams.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  return params
}
const { scrollRef, state, list, getData, search, load } = useList<UserLogMo, Params>(
  reqUserLog,
  getParams
);


watch(
  ()=>props.searchParams.date,
  ()=>{
    search()
  },{
    deep:true
  }
)

onMounted(()=>{
  getData()
})

const handleSearch = () =>{
  search()
}

defineExpose({
  handleSearch
})
</script>